<template>
  <div class="box">
    <header>
      <van-nav-bar
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <div slot="left">
          <img src="@/assets/kefu.png" alt="">
        </div>
        <van-search v-model="value" placeholder="搜索" slot="title" left-icon="" background="#00CC99"  shape="round"/>
        <div slot="right">
          <img src="@/assets/cailanzi.png" alt="">
        </div>
      </van-nav-bar>
    </header>
    <section>
      <div class="banner" style="background-color: #fff">
         <van-swipe class="my-swipe" :autoplay="300000" indicator-color="white">
            <van-swipe-item v-for="item of bannerlist" :key="item.bannerId">
              <van-image
                lazy-load
                src="https://dummyimage.com/374x150/dc79f2/fff.png&text=cgmhkrjgh"
              />
            </van-swipe-item>
          </van-swipe>
      </div>
      <Nav />
      <Newshop />
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { getBanner } from '@/api'
import Nav from '@/components/nav'
import Newshop from '@/components/newshop'
import { Swipe, SwipeItem, Lazyload, NavBar, Search, Image } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Image)
export default {
  components: {
    Nav,
    Newshop
  },
  data () {
    return {
      bannerlist: []
    }
  },
  mounted () {
    // getProlist()
    getBanner().then(res => {
      console.log(res.data.data)
      this.bannerlist = res.data.data
    })
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.banner{
  @include rect(100%, 155px);
  background-color: #fff;
  // 清除浮动
  overflow: hidden;
  .my-swipe{
    height: 145px;
    width: 300px;
    margin: 15px auto;
    border-radius: 10px;
    .van-image{
      height: 115px;
    }
  }
  .van-swipe__indicator{
    @include rect(20px, 5px);
    border-radius: 5px;
    background-color: #9999;
  }
}
.van-nav-bar{
  background-color: #00CC99;
}
.van-search{
  padding: 8px 12px;
}
.van-nav-bar__title{
  min-width: 80%;
}
.van-field__control{
  text-align: center;
  font-size: 12.5px;
}
.van-field__body{
  line-height: 20px;
}
</style>
